<template>
    <el-dialog v-model="visible" title="素材详情" width="720px" :close-on-click-modal="false">
        <div class="detail-wrapper" v-if="material" v-loading="downloadLoading">
            <div class="detail-left">
                <video class="detail-video" controls preload="metadata" :src="material.downloadUrl" muted
                    playsinline></video>
                <div class="detail-bottom">
                    <div class="detail-row" v-if="material.isAuto">
                        <span class="d-label">真人讲解：</span>
                        <span class="d-val">{{ material.isRealPersonExplain ? '是' : '否' }}</span>
                    </div>
                    <div class="detail-row" v-if="material.isAuto">
                        <span class="d-label">匹配分数：</span>
                        <span class="d-val">{{ material.matchScore }}</span>
                    </div>
                    <div class="detail-row" v-if="material.isAuto">
                        <span class="d-label">所属文件夹：</span>
                        <span class="d-val">{{ material.folderId }}</span>
                    </div>
                    <div class="detail-row" v-if="material.isAuto">
                        <span class="d-label">视频点赞数：</span>
                        <span class="d-val">{{ material.likeCount }}</span>
                    </div>
                    <div class="detail-row">
                        <span class="d-label">视频token消耗：</span>
                        <span class="d-val">{{ material.videoTokenConsume }}</span>
                    </div>
                    <div class="detail-row">
                        <span class="d-label">音频token消耗：</span>
                        <span class="d-val">{{ material.audioTokenConsume }}</span>
                    </div>
                    <div class="detail-row">
                        <span class="d-label">总token：</span>
                        <span class="d-val">{{ material.totalToken }}</span>
                    </div>
                    <div class="detail-row" v-if="!material.isAuto">
                        <span class="d-label">任务ID：</span>
                        <span class="d-val">{{ material?.taskId || '' }}</span>
                    </div>
                    <div class="detail-row" v-if="!material.isAuto">
                        <span class="d-label">任务状态：</span>
                        <span class="d-val">{{ material?.taskStatus == true ? '成功' : material.taskStatus == false ? '失败' : '' }}</span>
                    </div>
                    <div class="detail-row" v-if="!material.isAuto&&material?.errorType">
                        <span class="d-label">错误类型：</span>
                        <span class="d-val">{{ material?.errorType  }}</span>
                    </div>
                </div>
            </div>
            <div class="detail-right">
                <div class="detail-row">
                    <span class="d-label">视频id：</span>
                    <span class="d-val">{{ material.videoId }}</span>
                </div>
                <div class="detail-row">
                    <span class="d-label">视频原链接：</span>
                    <a class="d-link" :href="material.originalUrl" target="_blank">
                        {{material.originalUrl}}
                    </a>
                </div>
                <div class="detail-row">
                    <span class="d-label">视频链接：</span>
                    <a class="d-link" :href="material.downloadUrl" target="_blank">
                        {{ material.downloadUrl }}
                    </a>
                </div>
                <div class="detail-row">
                    <span class="d-label">视频标语：</span>
                    <span class="d-val">{{ material.videoSlogan || '' }}</span>
                </div>
                <div class="detail-row">
                    <span class="d-label">视频标语翻译：</span>
                    <span class="d-val">{{ material.videoSloganTranslation || '' }}</span>
                </div>
                <div class="detail-row">
                    <span class="d-label">字幕内容：</span>
                    <span class="d-val">{{ material.subtitleContent || '' }}</span>
                </div>
                <div class="detail-row">
                    <span class="d-label">字幕内容翻译：</span>
                    <span class="d-val">{{ material.subtitleContentTranslation || '' }}</span>
                </div>
                <div class="detail-row">
                    <span class="d-label">音频内容：</span>
                    <span class="d-val">{{ material.audioContent || '' }}</span>
                </div>
                <div class="detail-row">
                    <span class="d-label">音频内容翻译：</span>
                    <span class="d-val">{{ material.audioContentTranslation || '' }}</span>
                </div>
                <div class="detail-row">
                    <span class="d-label">视频描述：</span>
                    <span class="d-val">{{ material.videoDescription || '' }}</span>
                </div>
            </div>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleDownload">下载视频</el-button>
                <el-button type="primary" @click="visible = false">返回</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import axios from 'axios';

const visible = defineModel<boolean>('visible', { default: false })

interface MaterialDetail {
    id: number
    videoId: string // 视频id
    originalUrl: string // 视频原链接
    downloadUrl: string // 视频链接
    videoSlogan?: string // 视频标语
    videoSloganTranslation?: string // 视频标语翻译
    subtitleContent?: string  // 字幕内容
    subtitleContentTranslation?: string  // 字幕内容翻译
    audioContent?: string  // 音频内容
    audioContentTranslation?: string  // 音频内容翻译
    videoDescription?: string  // 视频描述
    isRealPersonExplain: boolean  // 是否真人讲解
    matchScore: number // 匹配分数
    folderId: string // 所属文件夹
    likeCount: number // 视频点赞数
    videoTokenConsume: number // 视频token消耗
    audioTokenConsume: number // 音频token消耗
    totalToken: number // 总token
    isAuto: boolean // 是否自动生成
    taskId?: string // 识别任务ID
    taskStatus?: boolean // 识别任务状态
    errorType?: string // 错误类型
}

const props = defineProps<{
    material: MaterialDetail | null
}>()

const downloadLoading = ref(false)

// 下载视频
const handleDownload = async () => {
    downloadLoading.value = true
    if (!props.material?.downloadUrl) {
        ElMessage.warning("视频链接不存在");
        downloadLoading.value = false
        return;
    }
    const url = props.material.downloadUrl;
    const fileName = props.material.videoId
        ? `${props.material.videoId}.mp4`
        : "video.mp4";
    try {
        const response = await axios.get(url, {
            responseType: "blob",
            timeout: 0,
        });
        const blob = new Blob([response.data], { type: "video/mp4" });
        const blobUrl = window.URL.createObjectURL(blob);
        const link = document.createElement("a");
        link.href = blobUrl;
        link.download = fileName;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        window.URL.revokeObjectURL(blobUrl);
    } catch (error) {
        ElMessage.error("视频下载失败");
    } finally {
        downloadLoading.value = false
    }
}
</script>

<style lang="scss" scoped>
.detail-wrapper {
    width: 100%;
    min-height: 500px;
    max-height: 70vh;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.detail-left {
    width: 220px;
    flex-shrink: 0;
    max-height: 60vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.detail-video {
    width: 100%;
    min-height: 300px;
    max-height: 400px;
    border-radius: 6px;
    background: #f2f3f5;
    object-fit: contain;
}

.detail-right {
    flex: 1;
    min-width: 0px;
    max-height: 60vh;
    overflow-y: auto;
}

.detail-bottom {
    margin-top: 20px;
    width: 100%;
}

.detail-row {
    display: flex;
    align-items: start;
    gap: 6px;
    min-width: 0;
}

.d-label {
    color: #666;
    font-weight: bold;
    white-space: nowrap;
    width: 100px;
}

.d-val,
.d-link {
    flex: 1;
    min-width: 0px;
}

.d-link {
    color: #1677ff;
    text-decoration: none;
}
</style>
